
    <%--
      Created by IntelliJ IDEA.
      User: Gao
      Date: 2024/4/22
      Time: 15:26
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="/static/layui/css/layui.css">
        <script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
        <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
        <script src="/static/mylayer.js" type="text/javascript" charset="utf-8"></script>
        <script src="/static/kindeditor/kindeditor.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <form class="layui-form" action="">
        <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off"
                           class="layui-input">
                </div>
            <div class="layui-form-item">
                <label class="layui-form-label">照片</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <div class="layui-upload-list">
                            <img width="150px" height="150px" class="layui-upload-img" id="demo1">
                            <input type="hidden" name="photo" id="photoId">
                            <p id="demoText"></p>
                        </div>
                        <button type="button" class="layui-btn" id="uploadId">上传图片</button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所在单位</label>
                <div class="layui-input-block">
                    <input type="text" name="unit" lay-verify="required" placeholder="请输入" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" lay-verify="required" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label">电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" lay-verify="required" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">身份</label>
                    <div class="layui-form">
                        <input type="radio" name="identityId" value="1" title="学生">
                        <input type="radio" name="identityId" value="2" title="老师" checked>
                    </div>
                </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </div>>
    </form>

    <script>
        layui.use(['form', 'upload'], function () {
            var form = layui.form;
            var upload = layui.upload;

            //常规使用 - 普通图片上传
            var uploadInst = upload.render({
                elem: '#uploadId'
                ,url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(result){
                    if (result.code == 0) {
                        $('#photoId').val(result.data);
                        $('#demoText').html(''); //置空上传失败的状态
                    } else {
                        mylayer.errorMsg(result.msg);
                    }
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });

            // 绑定提交事件
            form.on('submit(submit)', function (data) {
                var field = data.field; // 获取表单字段值
                console.log(data);
                // 此处可执行 Ajax 等操作
                $.post(
                    '/card?method=add',
                    field,  //{name: 'zhyangsan', address: 'fdfd', time: 'fd'}
                    function (result) {
                        console.log(result);
                        if (result.code == 0) {
                            mylayer.okMsg(result.msg);
                            //layer.close(index);
                            //table.reload('tableId');
                            setInterval(function() {
                                //关闭弹出框
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                //刷新父页面
                                window.parent.location.reload();
                            }, 2000)
                        } else {
                            mylayer.errorMsg(result.msg);
                        }
                    },
                    'json'
                );
                return false; // 阻止默认 form 跳转
            });
        });
    </script>
    </body>
    </html>